map.on('load', function() {
  map.addSource('markers', {
  	type: 'geojson',
  	data: './data/data.geojson'
  });

  map.addLayer({
    'id': 'markers',
    "interactive": true,
    "type": "symbol",
    "source": "markers",
    "layout": {
      'text-line-height': 1, // this is to avoid any padding around the "icon"
      'text-padding': 0,
      'text-anchor': 'center',
      'text-allow-overlap': true,
      'text-field': String.fromCharCode(62405),
      'icon-optional': true, // since we're not using an icon, only text.
      'text-font': ['Font Awesome 5 Free Solid'],
      'text-size': 25
    },
    "paint": {
      'text-translate-anchor': 'viewport', // up to you to change this -- see the docs
      'text-color': '#67A48E' // whatever you want -- can even be data driven using a `{featureProperty}`,
    }
  });
});